<template>
  <div>
    <el-card
      v-for="(li, idx) in list"
      :key="idx"
      class="box-card margin-top-sm"
    >
      <div class="group-item">
        <!-- 排行榜 start     -->
        <template>
          <el-row :gutter="20">
            <el-col :span="12" :offset="0">
              <el-form-item label="名称">
                <el-input v-model="li.name" />
              </el-form-item>
            </el-col>
            <el-col :span="12" :offset="0">
              <el-form-item label="标识">
                <el-input v-model="li.field" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20" class="margin-top-sm">
            <el-col :span="12" :offset="0">
              <el-form-item label="内容">
                <el-input v-model="li.value" />
              </el-form-item>
            </el-col>
            <el-col :span="12" :offset="0">
              <el-form-item label="颜色">
                <el-color-picker v-model="li.color" />
              </el-form-item>
            </el-col>
          </el-row>

        </template>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'ContentList',
  props: {
    list: {
      type: Array,
      default() {
        return []
      }
    },
    formData: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      data: [
        {
          color: '',
          field: '',
          name: '',
          value: ''
        }
      ]
    }
  },
  watch: {
    list: {
      handler(newVal, oldVal) {
        console.log('obj.a changed', newVal, oldVal)

        this.$set(this.formData, 'data', newVal)
      },
      immediate: true,
      deep: true
    }
  },
  created() {
    console.log('formData', this.list)
  },
  methods: {
  }
}
</script>

  <style>
  .borders-top {
    border-top: 1px solid #e5e5e5;
  }
  .group-item {
    display: flow-root;
  }
  .deleteBte {
    color: red;
  }
  </style>
